<template>
  <div>
    <basic-dialog :visible="show"
                  minWidth="700px"
                  isShowClose
                  isShowBasicFooter
                  @submit="submit"
                  @close="$emit('close')"
                  title="打印二维码">
      <q-card-section style="height: 500px" class="scrollbar overflow-auto">
        <q-table
          :pagination="paginationCode"
          :data="selectOptions"
          :columns="columns"
          row-key="id"
          selection="multiple"
          :selected.sync="selected"
          grid
          hide-bottom
        >
          <template v-slot:item="props">
            <div
              class="q-pa-xs col-6 grid-style-transition"
              :style="props.selected ? 'transform: scale(0.95);' : ''"
            >
              <q-card :class="props.selected ? 'bg-grey-2' : ''">
                <q-card-section>
                  <q-checkbox dense v-model="props.selected" :label="props.row.name" />
                </q-card-section>
                <q-separator />
                <q-list dense>
                  <q-item>
                    <q-item-section>
                      <div class="box" style="display: flex" id="printTest">
                        <div class="box-left">
                          <div
                            style="width: 100%; height: 100%; display: flex;justify-content: center">
                            <img style="width: 100%" id="img" alt="" :src="props.row.url">
                          </div>
                        </div>
                        <div class="box-right flex justify-around">
                          <div class="text-shenglue full-width">
                            {{`编号`}}:{{ props.row.number }}
                            <q-tooltip>{{`编号`}}:{{ props.row.number }}</q-tooltip>
                          </div>
                          <div class="text-shenglue full-width">
                            {{`名称`}}:{{ props.row.name }}
                            <q-tooltip>{{`类型`}}:{{ props.row.name }}</q-tooltip>
                          </div>
                          <div class="text-shenglue full-width">
                            {{`规格`}}:{{ props.row.spec }}
                            <q-tooltip> {{`规格`}}:{{ props.row.spec }}</q-tooltip>
                          </div>
                        </div>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
          </template>
        </q-table>
      </q-card-section>
    </basic-dialog>
    <div ref="printDiv" v-show="false">
      <div class="boxDom"
           style="display: inline-flex; width: 600px;margin-bottom: 20px; border: 1px solid #999;margin-left: 20px;padding: 20px; align-items: center;"
           :key="i.id" v-for="i of selected">
        <div class="box-left">
          <div style="width: 200px; height: 200px; display: flex;justify-content: center">
            <img style="width: 100%" alt="" :src="i.url">
          </div>
        </div>
        <div class="box-right">
          <div style="margin-top:0px">
            {{`编号`}}:{{ i.number }}
          </div>
          <div style="margin-top:30px">
            {{`名称`}}:{{ i.name }}
          </div>
          <div style="margin-top:30px">
            {{`规格`}}:{{ i.spec }}</div>
        </div>
      </div>
    </div>
    <iframe ref="printDom" style="width: 0; height: 0; border: none;"></iframe>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import _ from 'lodash'
export default {
  name: 'tool-account-qrcode',
  props: {
    show: {
      type: Boolean,
      required: true
    },
    selectOption: {
      type: Array
    }
  },
  data () {
    return {
      list: [],
      paginationCode: {
        rowsPerPage: 0
      },
      selected: [],
      columns: [],
      selectOptions: []
    }
  },
  computed: {
  },
  methods: {
    qrcode (val) {
      console.log(val)
      const opts = {
        errorCorrectionLevel: 'H',
        type: 'image/jpeg',
        rendererOpts: {
          quality: 0.3
        }
      }
      let urlBase64
      QRCode.toDataURL(val.toString(), opts, function (err, url) {
        if (err) {
          throw err
        }
        urlBase64 = url
      })
      return urlBase64
    },

    // 打印
    submit () {
      let html = this.$refs.printDiv.innerHTML
      this.$refs.printDom.contentWindow.document.body.innerHTML = html
      this.$refs.printDom.contentWindow.print()
    }
  },
  watch: {
    show (val) {
      if (val) {
        const member = this.selectOption
        for (let i = 0; i < member.length; i++) {
          member[i].url = this.qrcode(_.get(member[i], 'number', ''))
        }
        this.selectOptions = member
        this.selected = member
      }
    }
  }
}
</script>

<style scoped lang="stylus">
/deep/ .q-card > div:not(:last-child), .q-card > img:not(:last-child) {
  padding 5px
}
.record-qrCode{
  position absolute
}
.box {
  .box-left {
    display flex
    width 40%
    height 110px
    /*border 1px solid red*/
    padding 1%
  }

  .box-right {
    display flex
    justify-content space-between
    width 50%
    height 110px
    /*border 1px solid red*/
    padding 2%
    margin-left 5px

  }
}

.boxDom {
  .box-left {
    display flex
    width 120px
    /*border 1px solid red*/
    padding 2% 2%
  }

  .box-right {
    display flex
    justify-content space-between
    align-items center
    width 300px
    height 110px
    /*border 1px solid red*/
    padding 2% 2%
    margin-left 10px

  }
}

.text-shenglue {
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

.text {
  font-size 16px
  width 100px
  color #333
  margin-left 28px
  padding-bottom 20px
}
.grid-style-transition {
  transition transform .28s, background-color .28s
}
</style>
